<template>
	<view>
		<uni-row>
			<uni-col :span="5">
				<view class="p5 text-center">
					<view v-for="item in floor" :key="item"  :class=" selectId == item ? 'selected left' : 'left'" @click="onSelect(item)">{{item}}</view>
				</view>
			</uni-col>
			<uni-col :span="18" :offset="1">
				<uni-list>
					<uni-list-item v-for="item in list" :key="item.id" :title="item.title" :note="item.type.title" link>
						<template v-slot:footer>
							<view class="tag_">
								<uni-tag @click="onInfo(item.id)" v-if="item.inspect && item.inspect.type == 1" text="正　常" type="success" size="mini" />
								<uni-tag @click="onInfo(item.id)" v-if="!item.inspect" text="待检查" type="error" size="mini" />
								<uni-tag @click="onInfo(item.id)" v-if="item.inspect && item.inspect.type == 2" text="检查维护" type="warning" size="mini" />
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-col>
		</uni-row>
		<view class="p15"><button class="mt15" type="primary" @click="onInsert">添加检查内容</button></view>
	</view>
</template>

<script>
import request from '../../api/request'

	export default {
		data() {
			return {
				selectId:'1F',
				floor:[],
				dataInfo:[],
				list:[]
			}
		},
		onLoad() {
			this.project = uni.getStorageSync('project')
			this.onGetData()
		},
		methods: {
			onGetData(){
				let _this = this
				request('safe','POST',{project_id:this.project.id}).then(res => {
					if(res.code != 200){
						uni.showToast({title: res.msg,icon: 'error',duration: 2000})
						return;
					}
					_this.dataInfo = res.data
					res.data = Object.entries(res.data)
					res.data.forEach(function(element,i) {
						_this.floor.push(element[0])
					});
					
					_this.onSelect(_this.floor[0])
				}).catch(err => {
					console.log(err)
				})
			},
			onSelect(data){
				this.list = this.dataInfo[data]
				this.selectId = data
			},
			onInsert(){
				uni.navigateTo({
					url: '/pages/safe/forms/forms'
				});
			},
			onInfo(id){
				uni.navigateTo({
					url: '/pages/safe/info/info?id='+id
				});
			}
		}
	}
</script>

<style>
.left{width: 100%;padding: 5px 0px;}
.selected{background-color: #4da1fc;color: #FFF;}
.tag_{padding-top: 6px;}
</style>
